<template>
  <div class="root-resource">
    <div class="findArea">
      <ul>
        <li>
          <label>算子名称：</label>
          <el-input v-model="queryParams.clientName" placeholder="请输入" clearable></el-input>
        </li>

        <li>
          <el-button type="primary" @click="handleSearch">
            <svg-icon class="menu-icon font-14" icon-class="resource_search"></svg-icon>
            搜索
          </el-button>
        </li>
      </ul>
      <div class="btnArea">
        <el-button :disabled="!checkedRowsId.length" :loading="batchDelLoading" @click="handleBatchDel"
          v-hasPermi="['bigdata:operator:custom:remove']">
          <svg-icon class="menu-icon font-14" icon-class="resource_del"></svg-icon>
          删除
        </el-button>
        <el-button type="primary" @click="handleAdd" v-hasPermi="['bigdata:operator:custom:add']">
          <svg-icon class="menu-icon font-14" icon-class="resource_add"></svg-icon>
          添加
        </el-button>
      </div>
    </div>
    <div ref="contentAreaRef" class="contentArea">
      <el-table v-if="tableVisible" ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange" v-loading="tableLoading" :height="tableHeight">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="clientName" label="算子名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="clientName" label="类型" show-overflow-tooltip></el-table-column>

        <el-table-column prop="clientName" label="算子描述" show-overflow-tooltip></el-table-column>

        <el-table-column prop="clientName" label="状态" show-overflow-tooltip></el-table-column>
        <el-table-column prop="clientName" label="创建人" show-overflow-tooltip></el-table-column>
        <el-table-column prop="clientName" label="创建时间" show-overflow-tooltip></el-table-column>

        <!-- <el-table-column prop="clientId" label="客户端ID" show-overflow-tooltip>
          <template slot-scope="scope">
            <div class="copyArea">
              <span class="text">{{ scope.row.clientId }}</span>
              <el-tooltip class="item" effect="dark" content="复制" placement="top">
                <div v-clipboard:copy="scope.row.clientId" v-clipboard:success="CopySuccess"
                  v-clipboard:error="CopyError">
                  <svg-icon class="copy-icon font-14" icon-class="accessToken_copy"></svg-icon>
                </div>
              </el-tooltip>
            </div>
          </template>
</el-table-column>
<el-table-column prop="clientSecret" label="客户端密钥" show-overflow-tooltip>
  <template slot-scope="scope">
            <div class="copyArea">
              <span class="text">{{ scope.row.clientSecret }}</span>
              <el-tooltip class="item" effect="dark" content="复制" placement="top">
                <div v-clipboard:copy="scope.row.clientSecret" v-clipboard:success="CopySuccess"
                  v-clipboard:error="CopyError">
                  <svg-icon class="copy-icon font-14" icon-class="accessToken_copy"></svg-icon>
                </div>
              </el-tooltip>
            </div>
          </template>
</el-table-column>
<el-table-column prop="token" label="Token" show-overflow-tooltip>
  <template slot-scope="scope">
            <div class="copyArea">
              <span class="text">{{ scope.row.token }}</span>
              <el-tooltip class="item" effect="dark" content="复制" placement="top">
                <div v-clipboard:copy="scope.row.token" v-clipboard:success="CopySuccess" v-clipboard:error="CopyError">
                  <svg-icon class="copy-icon font-14" icon-class="accessToken_copy"></svg-icon>
                </div>
              </el-tooltip>
            </div>
          </template>
</el-table-column>
<el-table-column prop="status" label="状态" width="80">
  <template slot-scope="scope">
            <div class="statusBox">
              <i class="dot" :class="scope.row.status == 0 ? 'success' : 'err'"></i>
              <span>{{ scope.row.status == 0 ? '上线' : '下线' }}</span>
            </div>
          </template>
</el-table-column>
<el-table-column prop="updateTime" label="更新时间" show-overflow-tooltip></el-table-column> -->
        <el-table-column prop="operation" label="操作" width="270">
          <template slot-scope="scope">
            <el-button type="text" class="define" @click="handleDefine(scope.row)"
              v-hasPermi="['bigdata:operator:custom:define']">算子定义</el-button>
            <el-button type="text" class="edit" @click="handleRowEdit(scope.row)"
              v-hasPermi="['bigdata:operator:custom:edit']">编辑</el-button>
            <el-button type="text" class="del" @click="handleRowDel(scope.row)"
              v-hasPermi="['bigdata:operator:custom:remove']">删除</el-button>
            <el-button v-if="scope.row.status != '0'" type="text" size="small" @click="handleStart(scope.row)"
              v-hasPermi="['bigdata:operator:custom:online']">上线</el-button>
            <el-button v-if="scope.row.status == '0'" type="text" size="small" @click="handleStop(scope.row)"
              class="stopBtn" v-hasPermi="['bigdata:operator:custom:offline']">下线</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination :totalSize="totalSize" :page.sync="pageInfo.page" :limit.sync="pageInfo.pageSize"
      @getList="requestList" />
    <addOrEdit v-if="popup.show" :mode="popup.mode" :data="popup.data" @success="handleSearch"
      @closed="handlePopupClosed">
    </addOrEdit>
    <dataStructure v-if="dataStructure.show" @close="handleDataStructureClose"></dataStructure>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapState } from 'vuex'
import addOrEdit from './addOrEdit.vue'
import Pagination from '@/components/Pagination'
import axios from '@/service/handleService'
import dataStructure from '@/page/WorkspaceOld/Notebook/OpeCellList/dataStructure.vue'
export default {
  name: 'innnerOpe',
  components: {
    addOrEdit,
    Pagination,
    dataStructure
  },
  data() {
    return {
      dataStructure: {
        show: false
      },
      queryParams: {
        clientName: '',
        clientId: ''
      },
      tableHeight: 400,
      tableVisible: true,
      tableData: [],
      tableLoading: false,
      totalSize: 0,
      pageInfo: {
        page: 1,
        pageSize: 10
      },
      checkedRowsId: [],
      batchDelLoading: false,
      popup: {
        mode: 0,
        show: false
      }
    }
  },
  created() {
    this.params = this.$route.params
    this.requestList()
  },
  mounted() {
    this.tableHeight = this.$refs.contentAreaRef.clientHeight
    this.tableVisible = false
    this.$nextTick(() => {
      this.tableVisible = true
    })
  },
  methods: {

    ...mapActions({
      getAccessTokenList: 'GET_ACCESSTOKEN_LIST',
      stopAccessToken: 'STOP_ACCESSTOKEN',
      startAccessToken: 'START_ACCESSTOKEN',
      deleteAccessToken: 'DELETE_ACCESSTOKEN'
    }),
    handleDataStructureClose() {
      this.dataStructure.show = false
    },
    async requestList() {
      this.tableData = [{}]
      // const parmas = {
      //   ...this.queryParams,
      //   ...this.pageInfo,
      //   projectId: this.params.projectId
      // }
      // this.tableLoading = true
      // const res = await this.getAccessTokenList(parmas)
      // if (res.code == 200) {
      //   this.tableLoading = false
      //   this.tableData = res.data.list
      //   this.totalSize = res.data.total
      //   this.checkedRowsId = []
      // }
    },
    CopySuccess() {
      this.$message.success('复制成功')
    },
    CopyError() {
      this.$message.error('复制失败')
    },
    async handleStart(row) {
      try {
        const res = await this.startAccessToken({ ids: [row.id] })
        if (res.code === 200) {
          this.$message.success('操作成功')
          this.handleSearch()
        } else {
          this.$message.error('操作失败')
        }
      } catch (e) {
        console.log(e)
      }
    },
    async handleStop(row) {
      this.$confirm(
        '您确定要下线此任务吗？',
        '提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(async () => {
        this.confirmStop(row)
      })
    },
    async confirmStop(row) {
      try {
        const res = await this.stopAccessToken({ ids: [row.id] })
        if (res.code === 200) {
          this.$message.success('操作成功')
          this.handleSearch()
        } else {
          this.$message.error('操作失败')
        }
      } catch (e) {
        console.log(e)
      }
    },
    handleSelectionChange(data) {
      this.checkedRowsId = data.map(item => item.id)
    },
    handleRowDel(row) {
      // 单个删除
      this.deleteAccessToken({ ids: [row.id] }).then(res => {
        const { code } = res
        if (code === 200) {
          this.checkedRowsId = []
          this.handleSearch()
          this.$message.success('操作成功')
        } else {
          this.$message.error('操作失败')
        }
        this.batchDelLoading = false
      })
    },
    handleBatchDel() {
      // 批量删除
      if (this.checkedRowsId.length) {
        this.batchDelLoading = true
        this.deleteAccessToken({ ids: [...this.checkedRowsId] }).then(res => {
          const { code } = res
          if (code === 200) {
            this.checkedRowsId = []
            this.handleSearch()
            this.$message.success('操作成功')
          } else {
            this.$message.error('操作失败')
          }
          this.batchDelLoading = false
        })
      } else {
        this.$message.warning('请先勾选数据~')
      }
    },
    handleSearch() {
      this.pageInfo.page = 1
      this.requestList()
    },
    handleAdd() {
      this.popup.show = true
      this.popup.mode = 0
    },
    handlePopupClosed() {
      this.popup.show = false
    },
    handleRowEdit(row) {
      this.popup.show = true
      this.popup.mode = 1
      this.popup.data = row
    },
    handleDefine() {

      this.dataStructure.show = true

    }
  }
}
</script>

<style lang="scss" scoped>
.root-resource {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.findArea {
  display: flex;
  justify-content: space-between;
  background-color: $--color-nav;
  padding: 4px 12px;
  margin-bottom: 5px;

  ul {
    display: flex;
    align-items: center;

    li {
      display: flex;
      align-items: center;
      margin-right: 10px;

      label {
        white-space: nowrap;
        color: $--mian-color;
      }
    }
  }
}

.contentArea {
  flex: 1;
  overflow: hidden;

  .copyArea {
    display: flex;

    .copy-icon {
      cursor: pointer;
    }

    .text {
      margin-right: 5px;
    }
  }

  .del {
    color: #c73234;
    margin-left: 20px;
  }

  .del,
  .define,
  .edit {
    padding: 0;
  }

  .define {
    color: #fff
  }
}

.statusBox {
  display: flex;
  justify-content: start;
  align-items: center;

  .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-right: 8px;

    &.success {
      background: #00B929;
    }

    &.err {
      background: #D33232;
    }
  }
}

.stopBtn {
  color: #FF7E06;
}
</style>
